<template>
  <div class="View">
    <div class="page-view">
      <div class="describe">
        <span>{{$t('message.privilege.menuTile')}}</span>
        <p class="r-describe">
          <!-- <button class="black-btn">
            <i class="el-icon-plus"></i>
            <span>{{$t('message.public.addbtn')}}</span>
          </button>-->
          <!-- <i class="el-icon-upload2"></i>
          <i class="el-icon-download"></i>-->
        </p>
      </div>
      <div class="ipt-view">
        <span>{{$t('message.privilege.select')}}:</span>
        <el-select v-model="value" placeholder class="ipt">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="tree-view">
        <div class="tree">
          <div class="title">
            <span>{{$t('message.privilege.menu')}}</span>
          </div>
          <!-- <el-tree
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            style="marginTop:16px"
          ></el-tree>-->
        </div>
        <div class="tree tree-fun">
          <div class="title">
            <span>{{$t('message.privilege.funmenu')}}</span>
          </div>
          <el-checkbox-group v-model="checkList" style="marginTop:16px">
            <!-- <div class="check-view">
                  <el-checkbox label="下载"></el-checkbox>
            </div>-->
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
// 导出模块
export default {
  // 模块名字
  name: "PrivilegeManagement",
  // 模块数据
  data() {
    //数据
    return {
      options: [],
      value: "",
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkList: [],
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {},
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.$nextTick(function () {
      if ($(".LeftMenu").width() == 64) {
        $(".View").width($(".Content").width() - 64);
      } else if ($(".LeftMenu").width() == 192) {
        $(".View").width($(".Content").width() - 192);
      }
    });
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.View {
  width: calc(100% - 257px);
  height: 100%;
  .page-view {
    position: relative;
    // width: calc(100% - 112px);
    height: calc(100% - 48px);
    margin: 22px 24px 26px 24px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    border: 1px solid #b4b4b4;
    padding: 0 32px;
    .describe {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      padding: 34px 0 34px 0px;
      font-weight: bold;
    }
    .black-btn {
      width: 82px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      background: rgba(30, 30, 30, 1);
      border-radius: 4px;
      font-weight: 500;
      margin: 0 24px;
      span {
        margin: 0 0 0 8px;
      }
    }
    .ipt-view {
      .ipt {
        margin-left: 8px;
      }
      ::v-deep .el-select .el-input__inner {
        width: 435px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
      }
      ::v-deep .el-input__icon {
        line-height: 32px;
      }
      margin-bottom: 32px;
    }
    .tree-view {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .tree {
        width: 378px;
        height: 548px;
        border: 1px solid rgba(232, 232, 232, 1);
        .title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: rgba(240, 242, 245, 1);
          span {
            font-size: 14px;
            color: rgba(30, 30, 30, 1);
            margin-left: 24px;
            font-weight: bold;
          }
        }
      }
      ::v-deep
        .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background: #fff1f0;
      }
      ::v-deep .el-tree-node__content:hover {
        background: #fff1f0;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: rgb(89, 89, 89);
        border-color: rgb(89, 89, 89);
      }
      ::v-deep .el-checkbox__inner:hover {
        border-color: rgb(89, 89, 89);
      }
      .tree-fun {
        margin-left: 32px;
      }
      .check-view {
        padding: 0 24px;
        height: 26px;
        line-height: 26px;
        ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
          color: rgb(89, 89, 89);
        }
      }
      .check-view:active {
        background: #fff1f0;
      }
      .check-view:hover {
        background: #fff1f0;
      }
    }
  }
}
</style>
 